@charset "utf-8";

.prod-pageHeader {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: min(26.13vw,357px);
  overflow: hidden;
  & > div:not([class]) {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
  & h1 {
    color: #173055;
    /* font-size: min(3.52vw,45px); */
    font-size: min(2.73vw,35px);
    font-weight: 600;
    line-height: 1.44;
    &._white {
      color: #fff;
    }
  }
  & ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2vw;
    margin-block-end: min(1.25vw,16px);
  }
  & li {
    display: inline-block;
    padding-block: min(0.44vw,6px);
    padding-inline: min(1.46vw,20px);
    color: #FFF;
    font-size: min(1.17vw,16px);
    font-weight: 500;
    &:nth-child(1) {
      background-color: #2B4E76;
    }
    &:nth-child(n + 2) {
      background-color: #2B4E76;
      color: #ffffff;
    }
  }
  &[data-header="top"] {
    height: min(22.33vw,305px);
  }
  &[data-header="hero"] {
    position: relative;
    & h1:not([class]) {
      color: #FFF;
    }
    & picture {
      position: absolute;
      background-color: #2B4E76;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  &[data-header="lower"] {
    & h1 {
      color: #303030;
    }
  }
  &[data-header="list"], &[data-header="list2"] {
    & > div {
      display: grid;
      align-items: center;
      grid-template-columns: 1fr min(26.56vw,340px);
      justify-content: space-between;
    }
  }
  &[data-header="detail"] {
    height: min(29.06vw,397px);
    background-color: #F4F7F8;
    & h1 {
      color: #303030;
    }
    & ul {
      margin-block-end: min(1.41vw,18px);
      gap: .2vw;
    }
    & p {
      color: #303030;
      font-size: min(1.32vw,18px);
      font-weight: 500;
    }
  }
}
@media (width <= 760px) {
  .prod-pageHeader {
    height: auto;
    aspect-ratio: unset;
    min-height: 40vw;
    & > div:not([class]) {
      padding-block: 2.67vw;
      padding-inline: 2.67vw;
    }
    & h1 {
      /* font-size: 9.07vw; */
      font-size: 8vw;
    }
    & ul {
      margin-block-end: 4.27vw;
    }
    & li {
      padding-block: 1.07vw;
      padding-inline: 5.33vw;
      font-size: 4.27vw;
    }
    &[data-header="lower"] {
      & h1 {
        font-size: 7.47vw;
      }
    }
    &[data-header="list"], &[data-header="list2"] {
      & > div {
        gap: 10.67vw;
        grid-template-columns: 100%;
      }
      & .prod-item_img {
        width: 66.67vw;
        margin: auto;
        text-align: center;
        & img {
          width: 100%;
          height: auto;
          object-fit: cover;
        }
      }
    }
    &[data-header="list2"] {
      & h1 {
        font-size: 7.47vw;
      }
    }
    &[data-header="detail"] {
      height: auto;
      aspect-ratio: unset;
      padding-block-end: 10vw;
      & ul {
        margin-block-end: 6.4vw;
        gap: .8vw;
      }
      & p {
        margin-block-end: 1.6vw;
        font-size: 4.8vw;
      }
    }
  }
}

.prod-pageHeader_img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100% !important;
  height: auto;
  aspect-ratio: 1366/357;
  margin: auto;
  padding-inline: 0 !important;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (width <= 760px) {
  .prod-pageHeader_img {
    height: 100%;
  }
}


/***** search *****/
.prod-search {
  position: relative;
  padding-block: min(6.25vw,80px) min(3.91vw,50px);
  overflow-x: hidden;
  & > div {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
    & > p {
      position: relative;
      padding-inline-start: min(2.81vw,36px);
      font-size: min(1.76vw,24px);
      font-weight: 600;
      line-height: 1;
      color: var(--txt-black-color);
      &::before {
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
        display: block;
        width: min(2.03vw,26px);
        height: auto;
        aspect-ratio: 1;
        background: url(/cms/wp-content/themes/ndc/assets/img/common/icn_relation.svg) no-repeat center/cover;
        content: "";
      }
    }
  }
}
@media (width <= 760px) {
  .prod-search {
    padding-block: 13.33vw;
    & > div {
      padding-inline: 2.67vw;
      & > p {
        padding-inline-start: 9.6vw;
        font-size: 5.87vw;
        &::before {
          width: 6.4vw;
        }
      }
    }
  }
}

.prod-searchBox {
  display: grid;
  gap: 0 min(0.78vw,10px);
  grid-template-columns: 1fr min(6.25vw,80px);
  margin-block-start: min(1.95vw,25px);
  padding-block: min(1.83vw,25px);
  padding-inline: min(2.58vw,33px);
  border-radius: 4px;
  background-color: #2B4E76;
  & > div {
    display: grid;
    gap: 0 min(2.66vw,34px);
    grid-template-columns: min(17.19vw,220px) 1fr;
  }
  & p {
    color: #FFF;
    font-size: min(1.32vw,18px);
    font-weight: 500;
  }
}
@media (width <= 760px) {
  .prod-searchBox {
    grid-template-columns: 100%;
    margin-block-start: 6.67vw;
    padding-block: 8vw;
    padding-inline: 4.53vw;
    & > div {
      grid-template-columns: 100%;
      gap: 2.67vw 0;
    }
    & p {
      font-size: 4.27vw;
    }
  }
}

.prod-searchBox_cate {
  width: min(16.11vw,220px);
  height: auto;
  aspect-ratio: 220/50;
  margin-block-start: min(1.25vw,16px);
  padding-inline: min(0.88vw,12px);
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: #FFF;
}
@media (width <= 760px) {
  .prod-searchBox_cate {
    width: 100%;
    height: auto;
    aspect-ratio: 320/40;
    margin-block-start: 4.27vw;
    padding-inline: 3.2vw;
  }
}

.prod-searchBox_word {
  width: 100%;
  height: min(3.66vw,50px);
  margin-block-start: min(1.25vw,16px);
  padding-inline: min(1.17vw,15px);
  border: none;
  background-color: #FFF;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset;
}
@media (width <= 760px) {
  .prod-searchBox_word {
    height: auto;
    aspect-ratio: 320/40;
    margin-block-start: 4.27vw;
  }
}

.prod-searchBox_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 80/50;
  margin-block-start: auto;
  border-radius: 4px;
  background-color: #707070;
  color: #FFF;
  font-weight: 500;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}
@media (width <= 760px) {
  .prod-searchBox_submit {
    aspect-ratio: 320/40;
    margin-block-start: 10.66vw;
    font-size: 4.27vw;
  }
}
@media (hover: hover) {
  .prod-searchBox_submit:hover {
    background-color: #FFF;
    color: var(--txt-black-color);
  }
}

.prod-search2 {
  position: relative;
  padding-block: min(4.39vw,60px);
  background-color: #2B4E76;
  overflow-x: hidden;
  & > div {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
    & > p {
      padding-block-end: min(1.46vw,20px);
      border-block-end: 2px solid rgba(255,255,255,0.15);
      color: #FFF;
      font-size: min(2.05vw,28px);
      font-weight: 500;
    }
  }
}
@media (width <= 760px) {
  .prod-search2 {
    padding-block: 16vw;
    & > div {
      padding-inline: 2.67vw;
      & > p {
        padding-block-end: 5.33vw;
        font-size: 7.47vw;
      }
    }
  }
}
.prod-searchBox2 {
  margin-block-start: min(1.56vw,20px);
  & > div {
    display: grid;
    align-items: center;
    gap: 0 min(0.88vw,12px);
    &:nth-child(1) {
      grid-template-columns: min(24.16vw,330px) minmax(0,1fr);
    }
    &:nth-child(2) {
      margin-block-start: min(1.1vw,15px);
      grid-template-columns: min(24.16vw,330px) minmax(0,1fr) min(6.25vw,80px);
    }
  }
  & p {
    color: #FFF;
    font-size: min(1.46vw,20px);
    font-weight: 500;
  }
}
@media (width <= 760px) {
  .prod-searchBox2 {
    margin-block-start: 5.33vw;
    & > div {
      gap: 4.27vw 0;
      &:nth-child(1) {
        grid-template-columns: 100%;
      }
      &:nth-child(2) {
        margin-block-start: 6.67vw;
        grid-template-columns: 100%;
      }
    }
    & p {
      font-size: 5.33vw;
    }
  }
}

.prod-searchBox2_cate {
  width: min(17.19vw,220px);
  height: auto;
  aspect-ratio: 220/50;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  background-color: #FFF;
}
@media (width <= 760px) {
  .prod-searchBox2_cate {
    width: 100%;
    height: auto;
    aspect-ratio: 355/50;
    margin-block-start: 0;
  }
}

.prod-searchBox2_word {
  width: 100%;
  height: min(3.66vw,50px);
  padding-inline: min(1.17vw,15px);
  border: none;
  background-color: #FFF;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset;
}
@media (width <= 760px) {
  .prod-searchBox2_word {
    height: auto;
    aspect-ratio: 355/50;
    margin-block-start: 0;
  }
}

.prod-searchBox2_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 80/50;
  margin-block-start: auto;
  border-radius: min(0.29vw,4px);
  background-color: #707070;
  color: #FFF;
  font-size: min(1.17vw,16px);
  font-weight: 500;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}
@media (width <= 760px) {
  .prod-searchBox2_submit {
    aspect-ratio: 355/50;
    margin-block-start: 2.4vw;
    border-radius: 1.07vw;
    font-size: 4.27vw;
  }
}
@media (hover: hover) {
  .prod-searchBox2_submit:hover {
    background-color: #FFF;
    color: var(--txt-black-color);
  }
}

.prod-observerArea {
  position: relative;
  overflow: hidden;
}


 /***** floatBox *****/
.prod-floatBox {
  position: fixed;
  top: 45%;
  right: 0;
  z-index: 10;
  width: 92.5%;
  transition: right 0.3s ease-out;
  &.is-fixed {
    right: 0;
  }
  &.is-active {
    pointer-events: visible;
  }
}
@media (width <= 760px) {
  .prod-floatBox {
    top: auto;
    right: auto;
    bottom: 16vw;
    left: 10px;
    width: 100%;
  }
}

.prod-floatBox_openBtn {
  position: absolute;
  top: 0;
  right: 0;
  translate: 100% -50%;
  display: block;
  width: min(4.45vw,57px);
  height: auto;
  aspect-ratio: 57/80;
  border-radius: 6px 0 0 6px;
  background-color: #2B4E76;
  line-height: 1;
  pointer-events: visible;
  transition: translate 0.3s ease-out;
  .is-fixed & {
    translate: 0 -50%;
  }
  .is-active & {
    pointer-events: none;
  }
  & img {
    width: min(2.34vw,30px);
    height: auto;
    aspect-ratio: 1;
  }
}
@media (width <= 760px) {
  .prod-floatBox_openBtn {
    top: auto;
    right: auto;
    translate: 0 0;
    width: 13.33vw;
    aspect-ratio: 1;
    border-radius: 1.6vw;
    .is-fixed & {
      translate: 0 0;
    }
    & img {
      width: 8vw;
    }
  }
}

.prod-floatBox_closeBtn {
  align-self: center;
  justify-self: center;
  width: min(3.1vw,33px);
  height: auto;
  aspect-ratio: 1;
  line-height: 1;
  & img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}
@media (width <= 760px) {
  .prod-floatBox_closeBtn {
    position: absolute;
    top: 7.47vw;
    right: 4.27vw;
    width: 8.8vw;
  }
}

.prod-floatBox_search {
  position: absolute;
  top: 0;
  right: 0;
  translate: 110% -50%;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr min(4.92vw,63px);
  width: 100%;
  border-radius: 6px 0 0 6px;
  background-color: #2B4E76;
  transition: translate 0.3s ease-out;
  .is-active & {
    translate: 0 -50%;
  }
}
@media (width <= 760px) {
  .prod-floatBox_search {
    top: auto;
    right: auto;
    translate: 0% 50%;
    grid-template-columns: 100%;
    width: calc(100% - 20px);
    border-radius: 1.6vw;
    .is-active & {
      translate: 0 -100%;
    }
  }
}

.prod-floatSearchBox {
  display: grid;
  gap: 0 0.94vw;
  grid-template-columns: min(18.75vw,240px) 1fr min(6.25vw,80px);
  align-items: end;
  padding-block: min(1.88vw,24px) min(2.34vw,30px);
  padding-inline: min(2.34vw,30px) 0;
}
@media (width <= 760px) {
  .prod-floatSearchBox {
    grid-template-columns: 100%;
    padding-block: 8vw;
    padding-inline: 4.27vw;
  }
}

.prod-floatSearchBox_ttl {
  color: #FFF;
  font-size: min(1.32vw,18px);
  font-weight: 500;
}
@media (width <= 760px) {
  .prod-floatSearchBox_ttl {
    font-size: 4.27vw;
  }
}

.prod-floatSearchBox_cate {
  width: 100%;
  height: min(3.13vw,40px);
  margin-block-start: min(1.25vw,16px);
  border: 1px solid #E0E0E0;
  background-color: #FFF;
}
@media (width <= 760px) {
  .prod-floatSearchBox_cate {
    height: 10.67vw;
    margin-block-start: 4.27vw;
  }
}

.prod-floatSearchBox_input {
  width: calc(100% - min(1.88vw,24px));
  margin-inline-start: min(1.88vw,24px);
}
@media (width <= 760px) {
  .prod-floatSearchBox_input {
    width: 100%;
    margin-inline-start: 0;
    margin-block-start: 2.67vw;
  }
}

.prod-floatSearchBox_word {
  width: 100%;
  height: min(3.13vw,40px);
  margin-block-start: min(1.25vw,16px);
  padding: 0 min(1.17vw,15px);
  border: none;
  background-color: #FFF;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2) inset;
}
@media (width <= 760px) {
  .prod-floatSearchBox_word {
    height: 10.67vw;
    margin-block-start: 4.27vw;
  }
}

.prod-floatSearchBox_submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 80/40;
  border-radius: 4px;
  background-color: #707070;
  color: #FFF;
  font-weight: 500;
  transition: background 0.3s ease-out, color 0.3s ease-out;
}
@media (width <= 760px) {
  .prod-floatSearchBox_submit {
    aspect-ratio: 320/40;
    margin-block-start: 6.4vw;
    text-align: center;
  }
}
@media (hover: hover) {
  .prod-floatSearchBox_submit:hover {
    background-color: #FFF;
    color: var(--txt-black-color);
  }
}


/***** link *****/
.prod-links {
  padding-block: min(2.2vw,30px);
  background-color: #F4F7F8;
  & ul {
    display: flex;
    gap: 0 min(1.56vw,20px);
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
    & a {
      position: relative;
      display: inline-block;
      padding-inline-end: min(2.34vw,30px);
      color: #303030;
      font-size: min(1.17vw,16px);
      font-weight: 500;
      line-height: 1.33;
      transition: color 0.3s ease-out;
      &::before, &::after {
        position: absolute;
        top: 50%;
        right: 0;
        translate: 0 -50%;
        width: min(1.56vw,20px);
        height: auto;
        aspect-ratio: 1;
      }
      &::before {
        border-radius: 50%;
        background-color: #FFF;
        transition: background 0.3s ease-out;
        content: "";
      }
      &::after {
        background: var(--txt-black-color);
        mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: background 0.3s ease-out, mask 0.3s ease-out;
        content: "";
      }
    }
  }
  &[data-links="bottom"] {
    background-color: #F3F3F3;
    & li:last-child {
      margin-inline-start: auto;
    }
  }
}
@media (width <= 760px) {
  .prod-links {
    padding-block: 9.33vw;
    & ul {
      flex-direction: column;
      gap: 4vw;
      padding-inline: 2.67vw;
      & a {
        padding-inline-end: 8vw;
        font-size: 4.27vw;
        &::before, &::after {
          width: 5.33vw;
        }
      }
    }
    &[data-links="bottom"] {
      padding-block: 6.13vw;
      & ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      & li:last-child {
        margin-inline-start: 0;
      }
    }
  }
}
@media (hover:hover) {
  .prod-links {
    & a:hover {
      color: var(--hover-color);
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
  }
}

.prod-internalLinks {
  padding-block: min(6.25vw,80px);
  & ul {
    display: grid;
    gap: min(0.94vw,12px) min(2.19vw,28px);
    grid-template-columns: repeat(4,1fr);
    max-width: 1360px;
    margin-inline: auto;
    padding-inline: 60px;
  }
  & li {
    border-bottom: 1px solid #D0D0D0;
  }
  & a {
    position: relative;
    display: block;
    padding-block-end: min(1.09vw,14px);
    font-weight: 500;
    line-height: 1.56;
    transition: color 0.3s ease-out;
    &::after {
      position: absolute;
      top: 0.1em;
      right: 0;
      rotate: 90deg;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
      background-color: #6A6A6A;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-internalLinks {
    padding-block: 18.67vw;
    & ul {
      gap: 3.2vw;
      grid-template-columns: 100%;
      padding-inline: 2.67vw;
      & a {
        padding-block-end: 3.73vw;
        &::after {
          width: 5.33vw;
        }
      }
    }
  }
}
@media (hover: hover) {
  .prod-internalLinks {
    & a:hover {
      color: var(--hover-color);
    }
  }
}

.prod-blueLinkBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: min(1.32vw,15px);
  background-color: #2B4E76;
  color: #FFF;
  font-size: min(1.46vw,20px);
  font-weight: 500;
  letter-spacing: 0.015em;
  text-align: center;
  & span {
    position: relative;
    padding-inline-end: min(2.2vw,30px);
    &::before, &::after {
      position: absolute;
      top: 0.9em;
      right: 0;
      translate: 0 -50%;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
    }
    &::before {
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      background: var(--txt-black-color);
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-blueLinkBtn {
    padding-block: 5.33vw;
    padding-inline: 5.87vw 2.67vw;
    font-size: 4.8vw;
    text-align: left;
    & span {
      padding-inline-end: 8vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-blueLinkBtn:hover {
    & span {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
  }
}

.prod-pdfLinkList {
  & ul {
    display: grid;
    gap: min(1.46vw,20px);
    grid-template-columns: repeat(3,1fr);
  }
}
@media (width <= 760px) {
  .prod-pdfLinkList {
    & ul {
      gap: 5.33vw;
      grid-template-columns: 100%;
    }
  }
}

.prod-pdfLink {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-block: min(1.83vw,25px);
  padding-inline: min(1.1vw,15px) min(3.66vw,50px);
  border-radius: 4px;
  background-color: #F4F7F8;
  font-size: min(1.46vw,20px);
  font-weight: 500;
  letter-spacing: 0.015em;
  transition: color 0.3s ease-out;
  &::after {
    position: absolute;
    top: 50%;
    right: min(2.2vw,30px);
    translate: 0 -50%;
    display: block;
    width: min(2.2vw,30px);
    height: auto;
    aspect-ratio: 1;
    background: url(../img/common/icn_link_pdf.svg) no-repeat center/cover;
    content: "";
  }
}
@media (width <= 760px) {
  .prod-pdfLink {
    padding-block: 7.73vw;
    padding-inline: 8vw 21.33vw;
    border-radius: 1.6vw;
    font-size: 5.33vw;
    &::after {
      right: 8vw;
      width: 8vw;
    }
  }
}
@media (hover: hover) {
  .prod-pdfLink:hover {
    color: var(--hover-color);
  }
}


/***** section *****/
.prod-section {
  padding-block: min(6.25vw,80px);
  background-color: #FFF;
  .prod-pageHeader +& {
    padding-block-start: 0;
  }
  &[data-js="pickUp"] {
    position: relative;
    padding-block: 0;
  }
  &[data-js="relatedProducts"] {
    padding-block: min(7.81vw,100px);
  }
}
@media (width <= 760px) {
  .prod-section {
    padding-block: 17.6vw;
    &[data-js="relatedProducts"] {
      padding-block: 16vw;
    }
  }
}

.prod-section2 {
  padding-block: min(6.25vw,80px);
}
@media (width <= 760px) {
  .prod-section2 {
    padding-block: 17.6vw;
  }
}

[data-bg="gray"] {
  background-color: #F4F7F8;
}

[data-bg="gray2"] {
  background-color: #F8F8F8;
}

/* .prod-section_ttl {
  font-size: min(2.19vw,28px);
  font-weight: 500;
}

.prod-section_ttl a {
  position: relative;
  display: inline-block;
  padding-inline-end: min(2.5vw,32px);
  line-height: 1.33;
  &::before {
    position: absolute;
    top: 0.65em;
    right: 0;
    translate: 0 -50%;
    width: min(1.88vw,24px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #2B4E76;
    transition: background 0.3s ease-out;
    content: "";
  }
  &::after {
    position: absolute;
    top: 0.65em;
    right: 0;
    translate: 0 -50%;
    width: min(1.88vw,24px);
    height: auto;
    aspect-ratio: 1;
    background: #FFF;
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: mask 0.3s ease-out;
    content: "";
  }
}
@media (hover: hover) {
  .prod-section_ttl a:hover {
    &::before {
      background-color: var(--hover-color);
    }
    &::after {
      mask-position: 0 0;
    }
  }
} */

.prod-productsPanels {
  display: grid;
  gap: min(1.56vw,20px);
  grid-template-columns: repeat(3,1fr);
  margin-block-start: min(2.73vw,35px);
}
@media (width <= 760px) {
  .prod-productsPanels {
    gap: 2.67vw 0;
    grid-template-columns: 100%;
    margin-block-start: 9.33vw;
  }
}

.prod-productsPanel {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: min(1.95vw,25px);
  border-radius: 6px;
  background: #F4F7F8;
  transition: background 0.3s ease-out;
  & p, & > a {
    position: relative;
    display: inline-block;
    padding-inline-end: min(3.2vw,34px);
    font-size: min(1.61vw,22px);
    font-weight: 600;
    line-height: 1.33;
    transition: color 0.3s ease-out;
    &::before {
      position: absolute;
      top: 0.65em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0.65em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      background: var(--txt-black-color);
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
      content: "";
    }
  }
  & ul {
    display: flex;
    gap: min(0.78vw,10px);
    flex-direction: column;
    margin-block-start: min(2.73vw,35px);
  }
  & li {
    padding-block-end: min(0.94vw,12px);
    border-bottom: 1px solid #E0E0E0;
    & a {
      position: relative;
      display: inline;
      padding-inline-end: min(2.34vw,30px);
      font-size: min(1.32vw,18px);
      font-weight: 500;
      line-height: 1.5;
      transition: color 0.3s ease-out;
      &::before, &::after {
        position: absolute;
        top: 0.78em;
        right: 0;
        translate: 0 -50%;
        width: min(1.56vw,20px);
        height: auto;
        aspect-ratio: 1;
      }
      &::before {
        border: 1px solid #2B4E76;
        border-radius: 50%;
        background-color: transparent;
        transition: border 0.3s, background 0.3s ease-out;
        content: "";
      }
      &::after {
        background-color: #2B4E76;
        mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: mask 0.3s ease-out, background 0.3s ease-out;
        content: "";
      }
    }
  }
}
@media (width <= 760px) {
  .prod-productsPanel {
    padding-block: 5.87vw 13.33vw;
    padding-inline: 5.87vw;
    border-radius: 1.6vw;
    & p, & > a {
      padding-inline-end: 9.07vw;
      font-size: 5.33vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
    & ul {
      gap: 3.2vw 0;
      margin-block-start: 9.33vw;
    }
    & li {
      padding-block-end: 3.73vw;
      & a {
        padding-inline-end: 8vw;
        font-size: 4.8vw;
        &::before, &::after {
          width: 5.33vw;
        }
      }
    }
  }
}
@media (hover: hover) {
  .prod-productsPanel {
    a:hover& {
      background-color: #FFF;
      box-shadow: 0 3px 3px rgba(0,0,0,0.16);
      & p {
        color: var(--hover-color);
        &::before {
          background-color: var(--hover-color);
        }
        &::after {
          background-color: #FFF;
          mask-position: 0 0;
        }
      }
    }
    & > a:hover {
      color: var(--hover-color);
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
    & li {
      & a:hover {
        color: var(--hover-color);
        &::before {
          border-color: var(--hover-color);
          background-color: var(--hover-color);
        }
        &::after {
          mask-position: 0 0;
          background-color: #FFF;
        }
      }
    }
  }
}

.prod-productsPanel_img {
  width: min(17.34vw,270px);
  height: auto;
  aspect-ratio: 1;
  margin-block: auto;
  margin-inline: auto;
  text-align: center;
  & img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
@media (width <= 760px) {
  .prod-productsPanel_img {
    width: 60.53vw;
    margin-block-start: 7.47vw;
  }
}

.prod-facilityPanels {
  display: grid;
  gap: min(1.17vw,15px);
  grid-template-columns: repeat(5,1fr);
  margin-block-start: min(2.73vw,35px);
}
@media (width <= 760px) {
  .prod-facilityPanels {
    gap: 2.93vw;
    grid-template-columns: repeat(2,1fr);
    margin-block-start: 9.33vw;
  }
}

.prod-facilityPanel {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: min(1.56vw,20px);
  padding-block-end: min(4.37vw,56px);
  border-radius: 6px;
  background: #F4F7F8;
  transition: background 0.3s ease-out;
  & p {
    position: relative;
    display: block;
    padding-inline-end: min(2.65vw,34px);
    font-size: min(1.46vw,20px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.03em;
    transition: color 0.3s ease-out;
    &::before, &::after {
      position: absolute;
      top: 0.78em;
      right: 0;
      translate: 0 -50%;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
    }
    &::before {
      border-radius: 50%;
      background-color: #FFF;
      transition: border 0.3s, background 0.3s ease-out;
      content: "";
    }
    &::after {
      background-color: #2B4E76;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-facilityPanel {
    padding: 3.73vw;
    border-radius: 1.6vw;
    & p {
      padding-inline-end: 6.4vw;
      font-size: 3.73vw;
      &::before, &::after {
        width: 3.73vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-facilityPanel:hover {
    background-color: #FFF;
    box-shadow: 0 3px 3px rgba(0,0,0,0.16);
    & p {
      color: var(--hover-color);
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        background-color: #FFF;
        mask-position: 0 0;
      }
    }
  }
}

.prod-facilityPanel_img {
  width: min(9.38vw,120px);
  height: auto;
  margin-block-start: auto;
  margin-inline: auto;
  text-align: center;
  & img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
@media (width <= 760px) {
  .prod-facilityPanel_img {
    width: 23.2vw;
    margin-block-start: 3.2vw;
  }
}

.prod-linkMedia {
  position: relative;
  display: block;
  & .prod-linkMedia_txtArea {
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    z-index: 1;
    width: min(34.04vw,465px);
    padding: min(4.4vw,60px);
    border-radius: 6px;
    background-color: #FFF;
    & h2 {
      position: relative;
      display: inline-block;
      padding-inline-end: min(3.13vw,40px);
      color: var(--txt-black-color);
      font-size: min(2.42vw,33px);
      font-weight: 600;
      line-height: 1.46;
      &::before, &::after {
        position: absolute;
        top: 0.75em;
        right: 0;
        translate: 0 -50%;
        width: min(1.88vw,24px);
        height: auto;
        aspect-ratio: 1;
        content: "";
      }
      &::before {
        border-radius: 50%;
        background-color: #2B4E76;
        transition: background 0.3s ease-out;
      }
      &::after {
        background: #FFF;
        mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: mask 0.3s ease-out;
      }
    }
    & p {
      margin-block-start: min(2.73vw,35px);
      color: var(--txt-main-color);
    }
  }
  & .prod-linkMedia_imgArea {
    width: min(64.45vw,825px);
    height: auto;
    aspect-ratio: 825/550;
    border-radius: min(.44vw,6px);
    overflow: hidden;
    & img {
      width: 100%;
      object-fit: cover;
      transition: scale 0.3s ease-out;
    }
  }
  &[data-cate="case"] {
    & .prod-linkMedia_txtArea {
      right: auto;
      left: 0;
      background-color: #F4F7F8;
    }
    & .prod-linkMedia_imgArea {
      margin-inline-start: auto;
      & img {
        transform-origin: center top;
      }
    }
  }
}
@media (width <= 760px) {
  .prod-linkMedia {
    & .prod-linkMedia_txtArea {
      position: static;
      translate: none;
      width: 100%;
      padding-block: 0 9.33vw;
      padding-inline: 0;
      & h2 {
        padding-inline-end: 9.07vw;
        font-size: 6.4vw;
        &::before, &::after {
          width: 6.4vw;
        }
      }
      & p {
        margin-block-start: 9.33vw;
      }
    }
    & .prod-linkMedia_imgArea {
      width: 100%;
      border-radius: 1.6vw;
    }
  }
}
@media (hover: hover) {
  .prod-linkMedia:hover {
    & .prod-linkMedia_txtArea {
      & h2 {
        color: var(--hover-color);
        &::before {
          background-color: var(--hover-color);
        }
        &::after {
          mask-position: 0 0;
        }
      }
    }
    & .prod-linkMedia_imgArea {
      & img {
        scale: 1.1;
      }
    }
  }
}

.prod-item_header {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min(26.56vw,340px);
  justify-content: space-between;
  & p {
    margin-block-start: min(3.13vw,40px);
    width: 500px;
  }
  & .prod-item_img {
    display: grid;
    place-items: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
}
@media (width <= 760px) {
  .prod-item_header {
    gap: 10.67vw;
    grid-template-columns: 100%;
    & p {
      margin-block-start: 10.67vw;
      width: 100%;
      line-height: 1.81;
    }
    & .prod-item_img {
      aspect-ratio: auto;
      & img {
        width: 64vw;
      }
    }
  }
}

.prod-item_contents {
  padding-block: min(1.95vw,25px);
}

.prod-item_list {
  display: grid;
  gap: 0 min(4.84vw,62px);
  grid-template-columns: repeat(3,1fr);
  & li {
    padding-block: min(1.41vw,18px);
    border-bottom: 1px solid #E0E0E0;
  }
  & a {
    position: relative;
    display: block;
    width: 100%;
    padding-inline-end: min(2.34vw,30px);
    /* font-size: min(1.46vw,20px); */
    font-size: min(1.17vw,16px);
    font-weight: 500;
    line-height: 1.5;
    &::before, &::after {
      position: absolute;
      top: 0.78em;
      right: 0;
      translate: 0 -50%;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
    }
    &::before {
      border: 1px solid #2B4E76;
      border-radius: 50%;
      background-color: transparent;
      transition: border 0.3s, background 0.3s ease-out;
      content: "";
    }
    &::after {
      background-color: #2B4E76;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-item_list {
    grid-template-columns: 100%;
    & li {
      padding-block: 5.07vw;
    }
    & a {
      padding-inline-end: 9.07vw;
      /* font-size: 5.33vw; */
      font-size: 4.27vw;
      &::before, &::after {
        width: 5.33vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-item_list {
    & a:hover {
      &::before {
        border-color: var(--hover-color);
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
        background-color: #FFF;
      }
    }
  }
}

.prod-item_link2 {
  position: relative;
  display: block;
  width: 100%;
  padding-inline-end: min(3.76vw,40px);
  font-size: min(1.32vw,18px);
  line-height: 1.61;
  transition: color 0.3s ease-out;
  &::before {
    position: absolute;
    top: 0.78em;
    right: 0;
    translate: 0 -50%;
    width: min(1.56vw,20px);
    height: auto;
    aspect-ratio: 1;
    border: 1px solid #2B4E76;
    border-radius: 50%;
    background-color: transparent;
    transition: background 0.3s ease-out;
    content: "";
  }
  &::after {
    position: absolute;
    top: 0.78em;
    right: 0;
    translate: 0 -50%;
    width: min(1.56vw,20px);
    height: auto;
    aspect-ratio: 1;
    background-color: var(--txt-black-color);
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: mask 0.3s ease-out, background 0.3s ease-out;
    content: "";
  }
}
@media (hover: hover) {
  .prod-item_link2:hover {
    color: var(--hover-color);
    &::before {
      background-color: #2B4E76;
    }
    &::after {
      mask-position: 0 0;
      background-color: #FFF;
    }
  }
}

.prod-section_header {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-block: min(3.91vw,50px);
  padding-inline: 60px;
}
@media (width <= 760px) {
  .prod-section_header {
    padding-block: 17.33vw 9.33vw;
    padding-inline: 2.67vw;
    & h2 {
      font-size: 6.4vw;
    }
  }
}

.prod-pickUp {
  padding-block: min(6.59vw,70px);
  background-color: #2B4E76;
  overflow: hidden;
  & > div {
    margin-inline-start: calc(50vw - min(48.44vw,620px) - 20px);
    padding-inline-start: 20px;
  }
}
@media (width <= 760px) {
  .prod-pickUp {
    padding-block: 18.67vw;
  }
}

.prod-pickUp_link {
  display: block;
}

.prod-pickUp_img {
  border-radius: 6px;
  overflow: hidden;
  & img {
    width: 100%;
    height: 10%;
    object-fit: cover;
    transition: scale 0.3s ease-out;
    will-change: transform;
  }
}
@media (hover: hover) {
  .prod-pickUp_link:hover .prod-pickUp_img img {
    scale: 1.05;
  }
}

.prod-pickUp_ttl {
  margin-block-start: min(.56vw,6px);
  color: #FFF;
  font-size: min(1.1vw,15px);
  font-weight: 500;
  line-height: 1.5;
  transition: color 0.3s ease-out;
  & span {
    position: relative;
    &::after {
      /* display: inline-block;
      margin-inline-start: min(0.47vw,6px);
      translate: 0 -50%;
      width: min(0.94vw,12px);
      height: auto;
      aspect-ratio: 12/6;
      background: #FFF;
      mask: url(../img/common/icn_link_arrow2.svg) no-repeat;
      transition: background 0.3s ease-out, mask 0.3s ease-out;
      content: ""; */
      display: inline-block;
      margin-inline-start: min(0.47vw,6px);
      translate: 0 0.28em;
      width: min(1.56vw,20px);
      height: auto;
      aspect-ratio: 1;
      background-color: #FFF;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-pickUp_ttl {
    margin-block-start: 1.6vw;
    font-size: 4vw;
    & span {
      padding-inline-end: 5.33vw;
      &::after {
        width: 3.2vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-pickUp_link:hover {
    .prod-pickUp_ttl {
      /* color: var(--hover-color); */
      & span {
        &::after {
          mask-position: 0 0;
        }
      }
    }
  }
}

.prod-pickUp_txt {
  margin-block-start: min(1.875vw,24px);
  color: #E0E0E0;
  font-size: min(1.1vw,15px);
  font-weight: 400;
  line-height: 1.73;
}
@media (width <= 760px) {
  .prod-pickUp_txt {
    margin-block-start: 6.4vw;
    font-size: 4vw;
  }
}

.prod-lineups {
  display: grid;
  gap: 0 min(3.67vw,47px);
  grid-template-columns: repeat(3,1fr);
}

.prod-lineupPanel {
  display: block;
}

.prod-lineupPanel_ttl {
  position: relative;
  display: block;
  margin-block-start: min(1.56vw,20px);
  padding-inline-end: min(2.5vw,32px);
  font-size: min(1.46vw,20px);
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.3s ease-out;
  &::before {
    position: absolute;
    top: 0.7em;
    right: 0;
    translate: 0 -50%;
    width: min(1.88vw,24px);
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #2B4E76;
    transition: background 0.3s ease-out;
    content: "";
  }
  &::after {
    position: absolute;
    top: 0.7em;
    right: 0;
    translate: 0 -50%;
    width: min(1.88vw,24px);
    height: auto;
    aspect-ratio: 1;
    background-color: #FFF;
    mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
    transition: mask 0.3s ease-out, background 0.3s ease-out;
    content: "";
  }
}
@media (hover: hover) {
  .prod-lineupPanel_ttl:hover {
    color: var(--hover-color);
    &::before {
      background-color: var(--hover-color);
    }
    &::after {
      mask-position: 0 0;
    }
  }
}

.prod-lineupPanel_contents {
  margin-block-start: min(2.73vw,35px);
}

.prod-lineupPanel_list {
  margin-block-start: min(0.63vw,8px);
  & > li {
    padding: min(0.78vw,10px) 0;
    border-bottom: 1px solid #D0D0D0;
  }
}

.prod-lineupPanel_name {
  position: relative;
  display: block;
  padding-inline-end: min(2.5vw,32px);
  font-size: min(1.17vw,16px);
  font-weight: 500;
  &[href] {
    &::before {
      position: absolute;
      top: 0.9em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0.9em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      background-color: var(--txt-black-color);
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (hover: hover) {
  .prod-lineupPanel_name:hover {
    &::before {
      background-color: #2B4E76;
    }
    &::after {
      background-color: #FFF;
      mask-position: 0 0;
    }
  }
}

.prod-lineupPanel_itemList {
  & > li {
    font-size: min(1.1vw,15px);
    line-height: 1.93;
  }
  & a {
    position: relative;
    display: block;
    padding-inline-end: min(2.5vw,32px);
    &::before {
      position: absolute;
      top: 0.95em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0.95em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      background-color: var(--txt-black-color);
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (hover: hover) {
  .prod-lineupPanel_list a:hover {
    &::before {
      background-color: #2B4E76;
    }
    &::after {
      background-color: #FFF;
      mask-position: 0 0;
    }
  }
}

.prod-lineupPanel_img {
  width: 100%;
  height: auto;
  aspect-ratio:1;
  margin-block-start: min(1.56vw,20px);
  border-radius: 6px;
  box-shadow: 0 min(0.23vw,3px) min(0.23vw,3px) rgba(0,0,0,.16);
  overflow: hidden;
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale 0.3s ease-out;
  }
}
@media (hover: hover) {
  .prod-lineupPanel_img:hover {
    & img {
      scale: 1.05;
    }
  }
}


.prod-configuration {
  display: grid;
  align-items: center;
  /* gap: 0 min(6.25vw,80px); */
  /* grid-template-columns: min(48.44vw,620px) 1fr; */
  gap: 0 min(4.68vw,60px);
  grid-template-columns: min(37.5vw,480px) 1fr;
  margin-block-start: min(3.91vw,50px);
  & .prod-configuration_img {
    & > button {
      position: relative;
      background-color: #FFF;
      &::before {
        position: absolute;
        right: 5px;
        bottom: 5px;
        z-index: 1;
        display: block;
        width: min(1.95vw,25px);
        height: auto;
        aspect-ratio: 1;
        background-color: #000;
        mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_zoom.svg) no-repeat center/cover;
        content: "";
      }
      & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    /* & dialog {
      inset: 0;
      max-width: 80vw;
      max-height: 80vh;
      height: auto;
      margin: auto;
      border: none;
      overflow: visible;
      & div {
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
        & img {
          width: 100%;
          height: auto;
          max-height: 80vh;
          object-fit: contain;
        }
        & button {
          position: absolute;
          right: 0;
          top: calc(min(2.42vw,33px) * -1);
          display: block;
          width: min(2.42vw,33px);
          height: auto;
          aspect-ratio: 1;
          background-color: transparent;
          &::before {
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_close_circle.svg) no-repeat center/cover;
          }
        }
      }
    } */
  }
  & .prod-configuration_txt {
    font-size: min(1.32vw,18px);
  }
}
@media (width <= 760px) {
  .prod-configuration {
    gap: 13.33vw;
    grid-template-columns: 100%;
    & .prod-configuration_img {
      & > button {
        position: relative;
        &::before {
          position: absolute;
          right: 1.33vw;
          bottom: 1.33vw;
          width: 6.67vw;
        }
      }
      /* & dialog {
        max-width: 90vw;
        & div {
          & button {
            right: 0;
            top: -8.8vw;
            width: 6.67vw;
          }
        }
      } */
    }
    & .prod-configuration_txt {
      font-size: 4.8vw;
    }
  }
}

.prod-mediaModal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  border: none;
  width: min(90.78vw,1240px);
  height: 80vh;
  margin: auto;
  & > div {
    width: 100%;
    height: 100%;
    padding-block-start: min(2.93vw,40px);
  }
  & button {
    position: absolute;
    right: min(0.29vw,4px);
    top: min(0.29vw,4px);
    display: block;
    width: min(2.42vw,33px);
    height: auto;
    aspect-ratio: 1;
    background-color: transparent;
    &::before {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_close_circle.svg) no-repeat center/cover;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-mediaModal {
    & > div {
      width: 90vw;
      padding-block-start: 10.67vw;
    }
    & button {
      top: 2.13vw;
      right: 2.13vw;
      width: 6.67vw;
    }
  }
}

.prod-mediaModal_img {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  & img {
    width: 100%;
    height: auto;
  }
}
@media (width <= 760px) {
  .prod-mediaModal_img {
    & img {
      width: 250%;
      max-width: max-content;
    }
  }
}

.prod-relatedProducts {
  overflow: hidden;
  & > div {
    margin-inline-start: calc(50vw - min(48.44vw,620px) - 20px);
    padding-inline-start: 20px;
  }
}
@media (width <= 760px) {
  .prod-relatedProducts {
    padding-inline-start: 10px;
    & li {
      position: relative;
      padding-block-end: min(1.33vw,17px);
      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg,#036EB8 0%, #036EB8 20px, #E0E0E0 20px, #E0E0E0 100%);
        content: "";
      }
    }
  }
}
@media (width <= 760px) {
  .prod-relatedProducts {
    & li {
      &::before {
        height: 1px;
      }
    }
  }
}

.prod-cate3Panels {
  & ul {
    display: grid;
    gap: min(3.29vw,44px);
    grid-template-columns: repeat(4,1fr);
  }
  & li {
    position: relative;
    padding-block-end: min(1.33vw,17px);
    /* border-block-start: 1px solid #F3F3F3; */
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg,#036EB8 0%, #036EB8 20px, #E0E0E0 20px, #E0E0E0 100%);
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-cate3Panels {
    & ul {
      gap: 3.73vw 7.2vw;
      grid-template-columns: repeat(2,1fr);
    }
    & li {
      padding-block-end: 4.53vw;
      border-block-start: none;
    }
  }
}

.prod-cate3Panel {
  display: block;
  & > div {
    border-radius: 6px;
    overflow: hidden;
    & img {
      display: block;
      width: 80%;
      aspect-ratio: 1;
      margin: 0 auto;
      object-fit: contain;
      transition: scale 0.3s ease-out;
      will-change: transform;
    }
  }
  & p {
    position: relative;
    display: block;
    margin-block-start: min(0.78vw,10px);
    padding-inline-end: min(2.66vw,34px);
    font-weight: 500;
    line-height: 1.56;
    overflow-wrap: anywhere;
    transition: color 0.3s ease-out;
    &::before, &::after {
      position: absolute;
      top: 0.8em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      content: "";
    }
    &::before {
      border-radius: 50%;
      background-color: #2B4E76;
      transition: background 0.3s ease-out;
    }
    &::after {
      background-color: #FFF;
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
    }
  }
}
@media (width <= 760px) {
  .prod-cate3Panel {
    display: grid;
    grid-template-rows: 43.73vw 1fr;
    height: 100%;
    & p {
      height: 100%;
      margin-block-start: 0;
      padding-block-end: 9.07vw;
      /* padding-inline-end: 6.4vw; */
      padding-inline-end: 0;
      font-size: 3.73vw;
      &::before,&::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
        translate: 0;
        width: 6.4vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-cate3Panel:hover {
    & p {
      &::before {
        background-color: var(--hover-color);
      }
      &::after {
        mask-position: 0 0;
      }
    }
  }
}

.prod-cate3Panel._nolink {
  color: var(--txt-black-color);
  & p {
    padding-inline-end: 0;
    &::before {
      content: none;
    }
    &::after {
      content: none;
    }
  }
}


/***** products details *****/
.prod-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 1366/624;
  background: url(/cms/wp-content/themes/ndc/assets/img/prod/img_top_hero_bg.webp) no-repeat center/cover;
  & svg {
    width: 100%;
    height: auto;
  }
}
@media (width <= 760px) {
  .prod-hero {
    aspect-ratio: 375/246;
    & svg {
      display: none;
    }
  }
}

.prod-hero_rectangle {
  fill: #2b4e76;
  transition: fill 0.3s ease-out;
}
@media (hover: hover) {
  .prod-hero a:hover {
    & .prod-hero_rectangle {
      fill: var(--hover-color);
    }
  }
}

.prod-overview {
  & h2 {
    font-size: min(1.46vw,20px);
    font-weight: 500;
    color: var(--txt-black-color);
  }
  & p {
    margin-block-start: min(1.56vw,20px);
    font-size: min(1.17vw,16px);
  }
  & *:first-child {
    margin-block-start: 0;
  }
}
@media (width <= 760px) {
  .prod-overview {
    & h2 {
      font-size: 5.33vw;
    }
    & p {
      margin-block-start: 5.33vw;
      font-size: 4.27vw;
    }
  }
}

.prod-profile {
  display: grid;
  gap: 0 min(3.91vw,50px);
  grid-template-columns: min(45.11vw,480px) 1fr;
  margin-block-start: min(3.91vw,50px);
}
@media (width <= 760px) {
  .prod-profile {
    gap: 8vw 0;
    grid-template-columns: 100%;
    margin-block-start: 5.33vw;
  }
}

.cmn-section_inner:not(:has(.prod-overview)) > .prod-profile {
  margin-block-start : 0;
}


.prod-profilePhoto_main {
  & img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
  }
}

.prod-profilePhoto_thumbs {
  display: grid;
  gap: 0 min(0.63vw,8px);
  grid-template-columns: repeat(5,1fr);
  margin-block-start: min(1.95vw,25px);
  & li {
    border: 1px solid #E0E0E0;
    &.is-current {
      outline: 2px solid #2B4E76;
      outline-offset: -2px;
    }
  }
  & img {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}
@media (width <= 760px) {
  .prod-profilePhoto_thumbs {
    gap: 0 1.6vw;
    margin-block-start: 2.67vw;
  }
}

.prod-profile_mark {
  display: grid;
  gap: 0 min(1.17vw,15px);
  grid-template-columns: repeat(5,1fr);
  margin-block-start: min(3.91vw,50px);
}

.prod-profileSpec {
  overflow-x: auto;
  & table {
    width: 100%;
    border-bottom: 1px solid #C0C0C0;
    & tr {
      display: grid;
      grid-template-columns: min(15.63vw,200px) 1fr;
    }
    & th, & td {
      padding: min(0.78vw,10px) min(1.17vw,15px);
      border-top: 1px solid #C0C0C0;
      font-size: min(1.02vw,14px);
      vertical-align: top;
    }
    & th {
      background-color: #F0F0F0;
      text-align: left;
    }
    & td {
      padding-inline-start: min(1.56vw,20px);
      &.bold {
        font-size: min(1.17vw,16px);
        font-weight: 500;
      }
    }
  }
}
@media (width <= 760px) {
  .prod-profileSpec {
    & table {
      & tr {
        grid-template-columns: 28.8vw 1fr;
      }
      & th, & td {
        padding: 2.67vw 4.27vw;
        font-size: 3.73vw;
      }
      & td {
        padding-inline-start: 2.67vw;
        &.bold {
          font-size: 4.27vw;
        }
      }
    }
  }
}

.prod-notice {
  margin-block-start: min(2.35vw, 25px);
  & p {
    font-size: min(1.02vw,14px);
  }
}
@media (width <= 760px) {
  .prod-notice {
    margin-block-start: 6.67vw;
    & p {
      font-size: 3.73vw;
    }
  }
}

.prod-section-about {
  & .cmn-heading2 {
    margin-block-start: min(7.03vw, 90px);
    margin-block-end: 0;
  }
  & .cmn-section_inner *:first-child {
    margin-block-start: 0 !important;
  }
}
@media (width <= 760px) {
  .prod-section-about {
    & .cmn-heading2 {
      margin-block-start: 13.33vw;
    }
    & .cmn-section_inner > *:first-child {
      margin-block-start: 0 !important;
    }
  }
}

.prod-about_ttl {
  margin-block-start: min(7.03vw,90px);
  padding-block-end: min(0.39vw,5px);
  border-bottom: 2px solid #FFF;
  font-size: min(1.46vw,20px);
  font-weight: 500;
  color: var(--txt-main-color);
}
@media (width <= 760px) {
  .prod-about_ttl {
    margin-block-start: 13.33vw;
    padding-block-end: 1.33vw;
    font-size: 5.33vw;
  }
}

.prod-aboutMediaLeft {
  margin-block-start: min(2.73vw,35px);
  & > div {
    display: grid;
    gap: 0 min(4.53vw,58px);
    grid-template-columns: min(45.11vw,480px) 1fr;
    & img {
      display: block;
      margin-inline: auto;
    }
  }
}
@media (width <= 760px) {
  .prod-aboutMediaLeft {
    margin-block-start: 8vw;
    & > div {
      gap: 12vw 0;
      grid-template-columns: 100%;
      & div {
        &:nth-child(1) {
          order: 2;
        }
        &:nth-child(2) {
          order: 1;
        }
      }
    }
  }
}

.prod-aboutMediaRight {
  margin-block-start: min(2.73vw,35px);
  & > div {
    display: grid;
    gap: 0 min(4.53vw,58px);
    grid-template-columns: 1fr min(45.11vw,480px);
    & img {
      display: block;
      margin-inline: auto;
    }
  }
}
@media (width <= 760px) {
  .prod-aboutMediaRight {
    margin-block-start: 8vw;
    & > div {
      gap: 12vw 0;
      grid-template-columns: 100%;
    }
  }
}

.prod-aboutMediaTxt {
  margin-block-start: min(2.73vw,35px);
}
@media (width <= 760px) {
  .prod-aboutMediaTxt {
    margin-block-start: 8vw;
  }
}

.prod-aboutMediaImg {
  margin-block-start: min(2.73vw,35px);
  text-align: center;
}
@media (width <= 760px) {
  .prod-aboutMediaImg {
    margin-block-start: 8vw;
  }
}

.prod-aboutMediaImgBox {
  margin-block-start: min(2.73vw,35px);
  & > div {
    display: grid;
    gap: 0 min(3.91vw,50px);
    grid-template-columns: repeat(2,1fr);
    & img {
      display: block;
      margin-inline: auto;
    }
  }
}
@media (width <= 760px) {
  .prod-aboutMediaImgBox {
    margin-block-start: 9.33vw;
    & > div {
      gap: 10.13vw 0;
      grid-template-columns: 100%;
    }
  }
}

.prod-aboutMediaTxtBox  {
  margin-block-start: min(7.03vw,90px);
  & h3 {
    padding-block-end: min(0.39vw,5px);
    border-bottom: 2px solid #FFF;
    font-size: min(1.46vw,20px);
    font-weight: 500;
    & + p {
      margin-block-start: min(1.95vw,25px);
    }
  }
  & > div {
    display: grid;
    gap: 0 min(3.91vw,50px);
    grid-template-columns: repeat(2,1fr);
  }
}
@media (width <= 760px) {
  .prod-aboutMediaTxtBox {
    margin-block-start: 17.33vw;
    & h3 {
      padding-block-end: 1.33vw;
      font-size: 5.33vw;
      & + p {
        margin-block-start: 6.67vw;
      }
    }
    & > div {
      gap: 14.67vw 0;
      grid-template-columns: 100%;
    }
  }
}

.prod-movieMedia {
  display: grid;
  gap: min(4.69vw,60px) min(6.25vw,80px);
  grid-template-columns: repeat(2,1fr);
  margin-block-start: min(3.91vw,50px);
  & > div {
    & button {
      overflow: hidden;
      position: relative;
      & img {
        width: 100%;
        transition: scale 0.3s ease-out;
        &.prod-youtubeicon {
          position: absolute;
          top: calc(50% - min(3vw,45px));
          left: calc(50% - min(4vw,60px));
          width: min(8vw, 120px);
        }
      }
    }
  }
  & dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    background-color: transparent;
    &::backdrop {
      background-color: rgba(0,0,0,.4);
    }
    & div {
      position: absolute;
      inset: 0;
      width: 100%;
      max-width: 60%;
      height: auto;
      aspect-ratio: 560/315;
      margin: auto;
      & iframe {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      & button {
        position: absolute;
        top: calc(min(4.67vw,50px) * -1);
        right: 0;
        display: block;
        width: min(4.67vw,50px);
        height: auto;
        aspect-ratio: 1;
        margin: auto;
        background-color: transparent;
        &::before {
          position: absolute;
          inset: 0;
          width: 80%;
          height: auto;
          aspect-ratio: 1;
          margin: auto;
          background-color: #FFF;
          mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_close_circle.svg) no-repeat center/cover;
          content: "";
        }
      }
    }
  }
}
@media (width <= 760px) {
  .prod-movieMedia {
    gap: 5.33vw 0;
    grid-template-columns: 100%;
    margin-block-start: 10.67vw;
    & > div {
      & button {
        & img {
          &.prod-youtubeicon {
            top: calc(50% - 6vw);
            left: calc(50% - 8vw);
            width: 16vw;
          }
        }
      }
    }
    & dialog {
      & div {
        max-width: 90%;
        & button {
          top: -9.07vw;
          width: 8vw;
        }
      }
    }
  }
}
@media (hover:hover) {
  .prod-movieMedia {
    & > div {
      & button:hover {
        & img {
          scale: 1.05;
        }
      }
    }
  }
}

.prod-section-table {
  & .cmn-section_inner {
    & .cmn-heading2 {
      margin-block-start: min(3.91vw,50px);
      margin-block-end: 0;
    }
    & > *:first-child {
      margin-block-start: 0;
    }
  }
}
@media (width <= 760px) {
  .prod-section-table {
    & .cmn-section_inner {
      & .cmn-heading2 {
        margin-block-start:10.67vw;
      }
      & > *:first-child {
        margin-block-start: 0;
      }
    }
  }
}

.prod-tabletitle {
  margin-block-start: min(3.91vw,50px);
  padding-block-end: min(0.39vw, 5px);
  border-bottom: 2px solid #E0E0E0;
  font-size: min(1.46vw,20px);
  font-weight: 500;
  & + .prod-table {
    margin-block-start: min(1.95vw,25px);
  }
}
@media (width <= 760px) {
  .prod-tabletitle {
    margin-block-start: 10.67vw;
    padding-block-end: 1.33vw;
    font-size: 5.33vw;
    & + .prod-table {
      margin-block-start: 5.33vw;
    }
  }
}

.prod-table {
  margin-block-start: min(3.91vw,50px);
  overflow-x: auto;
  & table {
    width: auto;
  }
  & th, & td {
    border: 1px solid #C0C0C0;
    font-size: min(1.02vw,14px);
    text-align: center;
    white-space: nowrap;
  }
  & th {
    padding: min(.56vw,6px) min(1.95vw,25px);
  }
  & td {
    padding: min(.56vw,6px) min(1.25vw,16px);
  }
  & + .prod-notice {
    margin-block-start: min(1.18vw, 12.5px);
  }
}
@media (width <= 760px) {
  .prod-table {
    margin-block-start: 10.67vw;
    & th, & td {
      padding-block: 1.6vw;
      padding-inline: 2.4vw;
      font-size: 3.73vw;
    }
    & + .prod-notice {
      margin-block-start: 3.33vw;
    }
  }
}

.prod-arrowBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-start: min(3.91vw,50px);
  padding: min(1.56vw,20px);
  background-color: #2B4E76;
  transition: background 0.3s ease-out;
  & span {
    position: relative;
    display: inline-block;
    padding-inline-end: min(3.76vw,40px);
    color: #FFF;
    font-size: min(1.17vw,16px);
    font-weight: 500;
    line-height: 1.33;
    &::before {
      position: absolute;
      top: 0.65em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #FFF;
      transition: background 0.3s ease-out;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0.65em;
      right: 0;
      translate: 0 -50%;
      width: min(1.88vw,24px);
      height: auto;
      aspect-ratio: 1;
      background-color: var(--txt-black-color);
      mask: url(../img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
      transition: mask 0.3s ease-out, background 0.3s ease-out;
      content: "";
    }
  }
}
@media (width <= 760px) {
  .prod-arrowBtn {
    margin-block-start: 10.67vw;
    padding-inline: 1.33vw;
    padding-block: 3.73vw;
    & span {
      padding-inline-end: 5.33vw;
      font-size: 3.73vw;
      &::before {
        top: 0.7em;
        width: 4.27vw;
      }
      &::after {
        top: 0.7em;
        width: 4.27vw;
      }
    }
  }
}
@media (hover: hover) {
  .prod-arrowBtn:hover {
    background-color: var(--hover-color);
    & span::after {
      background-color: var(--hover-color);
      mask-position: 0 0;
    }
  }
}

.prod-series {
  margin-block-start: min(3.91vw,50px);
  & ul {
    display: grid;
    gap: min(3.13vw,40px);
    grid-template-columns: repeat(4,1fr);
  }
}
@media (width <= 760px) {
  .prod-series {
    margin-block-start: 10.67vw;
    & ul {
      gap: 3.2vw;
      grid-template-columns: repeat(2,1fr);
    }
  }
}

.prod-seriesPanel {
  display: block;
  & > div {
    border-radius: min(.56vw,6px);
    box-shadow: 0 min(0.23vw,3px) min(0.23vw,3px) rgba(0,0,0,.16);
    overflow: hidden;
    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: scale 0.3s ease-out;
    }
  }
  & p {
    margin-block-start: min(1.56vw,20px);
    font-size: min(1.17vw,16px);
    line-height: 1.56;
    transition: color 0.3s ease-out;
  }
}
@media (width <= 760px) {
  .prod-seriesPanel {
    & > div {
      box-shadow: 0 0.8vw 0.8vw rgba(0,0,0,.16);
    }
    & p {
      margin-block-start: 1.6vw;
      font-size: 3.73vw;
    }
  }
}
@media (hover: hover) {
  .prod-seriesPanel:hover {
    & > div {
      & img {
        scale: 1.05;
      }
    }
    & p {
      color: var(--hover-color);
    }
  }
}

.prod-slider_arrows {
  position: absolute;
  top: min(4.84vw,62px);
  right: calc(50% - min(48.44vw,620px));
  width: min(10.15vw,108px);
  height: auto;
  aspect-ratio: 108/36;
  margin-inline-start: auto;
  border-radius: 3px;
  background-color: #F4F7F8;
  & button {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    width: min(3.38vw,36px);
    height: auto;
    aspect-ratio: 1;
    border: none;
    border-radius: 3px;
    background-color: #F4F7F8;
    text-indent: 200%;
    white-space: nowrap;
    opacity: 1;
    overflow: hidden;
    transition: background .3s;
    &::before {
      position: absolute;
      inset: 0;
      width: min(.56vw,6px);
      height: auto;
      aspect-ratio: 6/11;
      margin: auto;
      background-color: #909090;
      mask: url(../img/top/icn_slider_arrow.svg) no-repeat center/cover;
      transition: background .3s;
      content: "";
    }
    &.prod-slider_arrow--prev {
      left: 0;
      &::before {
        rotate: 180deg;
      }
    }
    &.prod-slider_arrow--next {
      right: 0;
    }
    &:disabled {
      cursor: initial;
    }
  }
  [data-js="relatedProducts"] & {
    top: min(8.91vw,114px);
    right: 20px;
    background-color: #FFF;
    & button {
      background-color: #FFF;
    }
  }
}
@media (width <= 760px) {
  .prod-slider_arrows {
    position: relative;
    top: auto;
    right: auto;
    width: 28.8vw;
    margin-block-start: 4.8vw;
    margin-inline: auto;
    & button {
      width: 9.6vw;
      &::before {
        width: 1.6vw;
      }
    }
    [data-js="relatedProducts"] & {
      position: absolute;
      right: 10px;
      top: 0;
      margin-block-start: 16vw;
    }
  }
}
@media (hover: hover) {
  .prod-slider_arrows {
    & button:not(:disabled):hover {
      background-color: #2B4E76;
      &::before {
        background-color: #FFF;
      }
    }
  }
}

.prod-discList {
  & li {
    position: relative;
    padding-inline-start: min(1.46vw,20px);
    &::before {
      position: absolute;
      top: 0.95em;
      left: 0;
      translate: 0 -50%;
      display: block;
      width: min(1.1vw,15px);
      height: auto;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: #D0D0D0;
      content: "";
    }
    & + li {
      margin-block-start: min(1.1vw,15px);
    }
  }
}
@media (width <= 760px) {
  .prod-discList {
    & li {
      padding-inline-start: 5.33vw;
      &::before {
        top: 0.9em;
        width: 4vw;
      }
    }
  }
}

.prod-detailBreadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
  &::-webkit-scrollbar {
    height: 2px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: #aaa;
  }
  & ol {
    flex-wrap: nowrap;
    width: max-content;
    min-width: min(100%,1360px);
  }
  & li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}




/***** fireengine *****/
.prod-fireenginePanels {
  margin-block-start: min(7.32vw,100px);
  & ul {
    display: grid;
    gap: min(1.9vw,26px);
    grid-template-columns: repeat(3,1fr);
    & li {
      height: auto;
      aspect-ratio: 396/120;
    }
  }
}
@media (width <= 760px) {
  .prod-fireenginePanels {
    margin-block-start: 22.93vw;
    & ul {
      gap: 5.33vw 0;
      grid-template-columns: 100%;
      & li {
        aspect-ratio: 355/120;
      }
    }
  }
}

.prod-fireenginePanel {
  position: relative;
  z-index: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr min(6.73vw,92px);
  height: 100%;
  padding-inline: min(3.66vw,50px) min(2.2vw,30px);
  background-color: #F8F8F8;
  & p {   
    display: inline-block;
    font-size: min(1.46vw,20px);
    font-weight: 500;
    line-height: 1.45;
    & span {
      position: relative;
      padding-inline-end: min(2.49vw,34px);
      &::before, &::after {
        position: absolute;
        top: 50%;
        right: 0;
        translate: 0 -50%;
        width: min(1.76vw,24px);
        height: auto;
        aspect-ratio: 1;
        content: "";
      }
      &::before {
        border-radius: 50%;
        background-color: #FFF;
        transition: background 0.3s ease-out;
      }
      &::after {
        background: var(--txt-black-color);
        mask: url(/cms/wp-content/themes/ndc/assets/img/common/icn_link_arrow.svg) no-repeat 100% 0 / 200% 100%;
        transition: background 0.3s ease-out, mask 0.3s ease-out;
      }
    }
  }
}
@media (width <= 760px) {
  .prod-fireenginePanel {
    grid-template-columns: 1fr 18.93vw;
    min-height: 24.53vw;
    padding-inline: 13.33vw 12.27vw;
    & p {
      font-size: 4.27vw;
      & span {
        padding-inline-end: 9.07vw;
        &::before, &::after {
          width: 5.33vw;
        }
      }
    }
    & > div {
      & img {
        width: 100%;
        height: auto;
        object-fit: cover;
      }
    }
  }
}
@media (hover: hover) {
  .prod-fireenginePanel:hover {
    & p {
      & span {
        &::before {
          background-color: var(--hover-color);
        }
        &::after {
          background-color: #FFF;
          mask-position: 0 0;
        }
      }
    }
  }
}


/***** 生産終了 *****/
.prod-closeLinkWrap {
  margin-block-start: min(7.32vw,100px);
}